/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 *
 * @see You can view component api by: https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout, { DefaultFooter, SettingDrawer } from '@ant-design/pro-layout';
import React, { useEffect, useMemo, useRef } from 'react';
import { Link, connect, history, Redirect } from 'umi';
import { Result, Button } from 'antd';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/layout/GlobalHeader/RightContent';
import { getMatchMenu } from '@umijs/route-utils';
import logo from '../assets/logo.svg';
import styles from './BasicLayout.less';
import { getToken, getModuleCurrent } from '@/utils/token';

const noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
);

/** Use Authorized check all menu item */
const menuDataRender = (menuList) => {
  return menuList.map((item) => {
    const localItem = {
      ...item,
      children: item.children ? menuDataRender(item.children) : undefined,
    };
    
    return Authorized.check(item.authority, localItem, null);
  });
}

const BasicLayout = (props) => {
  if (getToken() === '' || getToken() === null || getToken() === 'undefined') return <Redirect to='/user/login' />;

  const {
    dispatch,
    children,
    settings,
    location = {
      pathname: '/',
    },
  } = props;

  const menuDataRef = useRef([]);
  
  const handleMenuCollapse = (payload) => {
    if (dispatch) {
      dispatch({ type: 'global/changeLayoutCollapsed', payload,  });
    }
  };

  const authorized = useMemo(
    () =>
      getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
        authority: undefined,
      },
    [location.pathname],
  );

  return (
    <>
      <ProLayout
        className={styles.layout}
        logo={logo}
        {...props}
        {...settings}
        onCollapse={handleMenuCollapse}
        menu={{
          request:  () => {
            return getModuleCurrent() && getModuleCurrent().menuList.length > 0 ? getModuleCurrent().menuList : [{}];
          },
        }}
        menuItemRender={(menuItemProps, defaultDom) => {
          if ( menuItemProps.isUrl || !menuItemProps.path || location.pathname === menuItemProps.path ) {
            return defaultDom;
          }

          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}
        breadcrumbRender={(routers = []) => [
          { path: '/',  breadcrumbName: '首页', },
          ...routers,
        ]}
        itemRender={(route, params, routes, paths) => {
          const first = routes.indexOf(route) === 0;
          return first ? (
            <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
          ) : (
            <span>{route.breadcrumbName}</span>
          );
        }}
        footerRender={() => ( <DefaultFooter copyright={`${new Date().getFullYear()} 版权信息`} links={[]} /> )}
        menuDataRender={menuDataRender}
        rightContentRender={() => <RightContent />}
        postMenuData={(menuData) => {
          menuDataRef.current = menuData || [];
          return menuData || [];
        }}
        onPageChange = { (location) => {
          // 访问不应该访问的页面时，跳转回首页
          // console.info(getModuleCurrent().pathList);
          // console.info(getModuleCurrent().pathList.indexOf(location.pathname));
          // console.info(location.pathname);
          if (location.pathname !== "/" && getModuleCurrent().pathList.indexOf(location.pathname) < 0) {
            history.replace('/');
          }
        }}
      >
        <Authorized authority={authorized.authority} noMatch={noMatch}>
          {children}
        </Authorized>
      </ProLayout>
      {/* <SettingDrawer
        settings={settings}
        onSettingChange={(config) =>
          dispatch({
            type: 'settings/changeSetting',
            payload: config,
          })
        }
      /> */}
    </>
  );
};

export default connect(({ global, settings }) => ({
  collapsed: global.collapsed,
  settings,
}))(BasicLayout);
